<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="jquery-1.11.0.js"></script>
   <style type="text/css">
   		.mydiv{
   			width: 50%;
   			height: 25%;
   			border: 1px solid;
   		}
   </style>
	<body>
		<div class="mydiv">居中div</div>
		jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，
		获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，
		得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，
		就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下： 
		复制代码 <br />
		1 $(window).resize(function(){ <br />
			2 $(".mydiv").css({ <br />
				3 position: "absolute", 
				4 left: ($(window).width() - $(".mydiv").outerWidth())/2, <br />
				5 top: ($(window).height() - $(".mydiv").outerHeight())/2 <br />
			6 }); <br />
		7 }); <br />
		复制代码 <br />
		此外在页面载入时，就需要调用resize()。<br />
		1 $(function(){ <br />
			2 $(window).resize(); <br />
		3 }); <br />
	</body>
	<script type="text/javascript">
		$(window).resize(function() {
			$(".mydiv").css({
				position: "absolute",
				left: ($(window).width() - $(".mydiv").outerWidth()) / 2,
				top: ($(window).height() - $(".mydiv").outerHeight()) / 2
			});
		});

		//此外在页面载入时，就需要调用resize()。
		$(function() {
			$(window).resize();
		});
	</script>

</html>